<template>
  <k-view class="stock-score-tag">
    <k-view :class="['system-score-tag', tagClassName]"></k-view>
    <k-text class="system-tag-desc">{{ desc }}</k-text>
  </k-view>
</template>

<script>
const tagNameTypes = {
  高于: 'more-than-tag',
  低于: 'low-tag',
  中性: 'normal-tag',
  亮点: 'point-tag',
  表现: 'apper-tag',
  风险: 'risk-tag',
};

export default {
  props: {
    tagName: {
      type: String,
      default: '高于',
    },
    desc: {
      type: String,
      default: '健康度状态良好',
    },
  },
  data() {
    return {};
  },
  computed: {
    tagClassName() {
      return tagNameTypes[this.tagName] || 'normalTag';
    },
  },
};
</script>

<style lang="less">
.stock-score-tag {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .system-score-tag {
    width: 92px;
    height: 36px;
    box-sizing: border-box;
    margin-right: 16px;
    background-repeat: no-repeat;
    background-size: 91px auto;
    background-position: left;
  }
  .more-than-tag {
    background-image: url(../../assets/index/morethan_tag.png);
  }
  .low-tag {
    background-image: url(../../assets/index/low_tag.png);
  }
  .normal-tag {
    width: 96px;
    height: 38px;
    background-image: url(../../assets/index/normal_tag.png);
  }
  .point-tag {
    background-image: url(../../assets/index/point_tag.png);
  }
  .apper-tag {
    background-image: url(../../assets/index/apper_tag.png);
  }
  .risk-tag {
    background-image: url(../../assets/index/risk_tag.png);
  }
  .system-tag-desc {
    width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 24px;
    color: #595959;
    font-weight: 400;
    line-height: 34px;
  }
}

[theme-mode='black'] {
  .stock-score-tag .system-tag-desc {
    color: rgba(255, 255, 255, 0.6);
  }
  .stock-score-tag .normal-tag {
    background-image: url(../../assets/index/normal_tag_dark.png) !important;
  }
}
</style>
